<template>
	<view class="comment">
		<view class="comment-header">
			<view class="header-number">
				2.5w条评论
			</view>
			<view class="iconfont  icon-chahao  close" @click="close">
			</view>
		</view>
		<!-- scroll-y纵向滚动 -->
		<scroll-view  scroll-y="true" class="comment-list">
			<view class="item">
				<view class="img-box">
					<image  class="img" src="http://124.221.26.166:8080/pic/girl.jpg">	
					</image>
				</view>
				<view class="comment-content">
					<view class="name">
						张三
					</view>
					<view class="content">
						我真的好喜欢你啊
					</view>
				</view>
				<view class="icon-box">
					<view class="iconfont  icon-aixin1  icon-love">	
					</view>
					<view class="love-number">
						12
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="comment-footer" >
			留下你精彩的评论吧
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment",
		data() {
			return {
				
			};
		},
		methods:{
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style>
	.comment{
		background: #FFFFFF;
		height:500px;
		border-radius: 15px 15px 0  0;
		width:100%;
	}
	.comment-header{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 25px;
		line-height: 25px;
	}
	.header-number{
		position: absolute;
		width: 100%;
		text-align: center;
		font-size: 15px;
		color: #000000;
		top: 10px;	
	}
	.close{
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 20px;
	}
	.comment-list{
		width: 100%;
		height: 370px;	
	}
	.item{
		width: 100%;
		height: 50px;
	}
	.img-box{
		float: left;
		padding-top: 15px;
		padding-left: 10px;
	}
	.img{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.comment-content{
		float: left;
		width: 70%;
		height: 50px;
		margin-top: 10px;
		padding-left: 5px;
	}
	.name{
		width: 100%;
		height: 25px;
		line-height: 25px;
		font-size:  17px;
	}
	.content{
		width: 100%;
		height: 25px;
		line-height: 25px;
		font-size:  14px;
	}
	.icon-box{
		float:  right;
		width:  10%;
		height: 50px;
		margin-top: 10px;
	}
	.icon-love{
		width: 100%;
		height: 25px;
		line-height: 25px;
		font-size: 15px;
	}
	.love-number{
		width: 100%;
		height: 25px;
		line-height: 25px;
		font-size: 15px;
	}
	.comment-footer{
		width: 100%;
		height: 35px;
		line-height: 35px;
		color: #666666;
		font-size: 18px;
		padding-left: 10px;
	}
	
</style>